<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,user-scalable=no"
    />
    <title>Document</title>
    <style>
      div {
        position: absolute;
        left: 0;
        top: 0;
        width: 100px;
        height: 100px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div></div>
    <script src="../js/fastclick.js"></script>
    <script>
      console.log("------------------");
      //触屏事件
      console.log("触屏事件");
      /* 1.touchstart 手指触摸到一个元素时触发
         2.touchmove 手指在一个元素上滑动时触发
         3.touchend 手指从一个元素上移开时触发*/

      //触摸事件对象
      /* 1.touches  正在触摸屏幕的所有手指的列表
         2.targetTouches    正在触摸当前元素的手指的列表
         3.changedTouches   手指状态发生改变的列表 */
      var div = document.querySelector("div");

      //touchstart 手指触摸到一个元素时触发
      /*       div.addEventListener("touchstart", function (e) {
        console.log(e.touches);
        console.log(e.targetTouches[0]);
        console.log(e.changedTouches);
      }); */

      //touchmove 手指在一个元素上滑动时触发
      /*       div.addEventListener("touchmove", function (e) {
        console.log(e.touches);
        console.log(e.targetTouches);
        console.log(e.changedTouches);
      }); */

      //touchend 手指从一个元素上移开时触发
      /*       div.addEventListener("touchend", function (e) {
        console.log(e.touches);
        console.log(e.targetTouches);
        console.log(e.changedTouches);
      }); */

      //拖动元素
      var startX = 0;
      var startY = 0;
      var x = 0;
      var y = 0;
      div.addEventListener("touchstart", function (e) {
        startX = e.targetTouches[0].pageX;
        startY = e.targetTouches[0].pageY;
        x = this.offsetLeft;
        y = this.offsetTop;
      });
      div.addEventListener("touchmove", function (e) {
        var moveX = e.targetTouches[0].pageX - startX;
        var moveY = e.targetTouches[0].pageY - startY;
        this.style.left = x + moveX + "px";
        this.style.top = y + moveY + "px";
        e.preventDefault();
      });

      console.log("------------------");
      //移动端click延时问题
      console.log("移动端click延时问题");
      /* 移动端click事件会有300ms的延时
            原因：移动端屏幕双击会缩放页面
            解决方法：
                1.禁用缩放 文档顶部加以下代码
                    <meta name="viewport" content="user-scalable=no"/>
                2.利用touch事件封装事件解决问题
                    1)触摸时，记录手指触摸时间
                    2)离开时，用离开的时间减去触摸时间
                    3)如果时间小于150ms，并且没有滑动过屏幕，就认为是点击
                3. 使用fastclick插件 github网址：https://github.com/ftlabs/fastclick*/
      if ("addEventListener" in document) {
        document.addEventListener(
          "DOMContentLoaded",
          function () {
            FastClick.attach(document.body);
          },
          false
        );
      }

    </script>
  </body>
</html>
